<template>
  <el-dialog append-to-body
             title="参数配置"
             :visible.sync="dialogVisible"
             width="600px"
             :close-on-click-modal="false"
             @close="handleClose">
    <el-table size="mini" :data="form.paramList" border>
      <el-table-column label="键" width="150">
        <template slot-scope="scope">
          <el-input v-model="scope.row.code"></el-input>

        </template>
      </el-table-column>
      <el-table-column label="值">
        <template slot-scope="scope">
          <el-input v-model="scope.row.value">
            <el-select v-model="scope.row.type" slot="prepend" placeholder="请选择" style="width: 100px">
              <el-option label="静态值" value=""></el-option>
              <el-option label="动态参数" value="&"></el-option>
            </el-select>
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="" width="50">
        <template slot-scope="scope">
          <el-button type="text" @click="handleParamDel(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-link type="primary" @click="handleParamAdd" :underline="false">+增加参数</el-link>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
  export default {
    props: {
      params: {
        type: Array,
        default: ()=>{
          return []
        }
      }
    },
    data() {
      return {
        dialogVisible: true,
        form: {
          paramList: [],
        }
      }
    },
    computed: {},
    beforeMount() {
      this.form.paramList = this.params.map(item => {
        return Object.assign({}, item)
      })
    },
    methods: {
      handleSubmit() {
        this.$emit('success', this.form.paramList);

      },
      handleClose() {
        this.$emit('close');
      },

      handleParamAdd() {
        this.form.paramList.push({
          type: ''
        })
      },
      handleParamDel(index) {
        console.log('delete', index);
        this.form.paramList.splice(index, 1);
      },
      getForm() {
        return this.form;
      },


    },

  }
</script>

